<template>
  <div class="hjr-select" :class="{ 'hjr-select--open': isOpen }">
    <div class="hjr-select__trigger" @click="toggleDropdown">
      <div class="hjr-select__value">
        {{ displayValue || placeholder }}
      </div>
      <span class="hjr-select__arrow">▼</span>
    </div>
    
    <Transition name="dropdown">
      <div v-if="isOpen" class="hjr-select__dropdown">
        <div
          v-for="option in options"
          :key="option.value"
          class="hjr-select__option"
          :class="{ 'hjr-select__option--selected': option.value === modelValue }"
          @click="selectOption(option)"
        >
          {{ option.label }}
        </div>
      </div>
    </Transition>
  </div>
</template>

<script>
export default {
  name: 'HjrSelect',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      default: () => [],
      validator: (value) => {
        return value.every(option => 
          typeof option === 'object' && 
          'value' in option && 
          'label' in option
        )
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    displayValue() {
      const selectedOption = this.options.find(option => option.value === this.modelValue)
      return selectedOption ? selectedOption.label : ''
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside)
  },
  methods: {
    toggleDropdown() {
      if (!this.disabled) {
        this.isOpen = !this.isOpen
      }
    },
    selectOption(option) {
      this.$emit('update:modelValue', option.value)
      this.$emit('change', option)
      this.isOpen = false
    },
    handleClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.isOpen = false
      }
    }
  }
}
</script>

<style scoped>
.hjr-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.hjr-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-height: 36px;
}

.hjr-select__trigger:hover {
  border-color: #667eea;
}

.hjr-select--open .hjr-select__trigger {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.hjr-select__value {
  flex: 1;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hjr-select__arrow {
  color: #999;
  font-size: 12px;
  transition: transform 0.2s;
  margin-left: 8px;
}

.hjr-select--open .hjr-select__arrow {
  transform: rotate(180deg);
}

.hjr-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.hjr-select__option {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hjr-select__option:hover {
  background-color: #f5f5f5;
}

.hjr-select__option--selected {
  background-color: #667eea;
  color: white;
}

.hjr-select__option--selected:hover {
  background-color: #5a6fd8;
}

/* 动画 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
